<template>
  <!-- <lay-button type="primary" @click="changedialogVisible">填报信息</lay-button> -->
  <lay-layer v-model="dialogVisible" :title="dialogTitle" :area="['75%', '70%']" :close="handleClose" :btn="action">
    <div style="padding: 20px;">
      <lay-form :model="form" ref="formRef" :rules="rules" :pane="true">

        <lay-form-item label="参数ID" prop="id" mode="inline" v-if="form.id != -1">
          <lay-input v-model="form.id" :disabled="true"></lay-input>
        </lay-form-item>
        <lay-form-item label="资源ID" prop="resource" mode="inline">
          <lay-input v-model="form.resource" :disabled="true"></lay-input>
        </lay-form-item>
        <br />

        <lay-form-item v-for="item in content" :key="item.id" :label="item.name" :prop="item.name" mode="inline">
          <lay-tooltip :content="item.title + '，单位：' + item.unit" :disabled="!tipDisabled">
            <lay-input-number position="right" v-model="form[item.name]" :min="0"></lay-input-number>
          </lay-tooltip>
        </lay-form-item>

        <lay-form-item label="备注" prop="remark">
          <lay-input v-model="form.remark"></lay-input>
        </lay-form-item>
        <!-- <lay-form-item label="数据来源" prop="source">
          <lay-textarea rows="3" v-model="form.source"></lay-textarea>
        </lay-form-item> -->
      </lay-form>
    </div>
  </lay-layer>
</template>

<script setup>
import { ref, reactive, watch, defineProps, defineEmits } from 'vue'
import { layer } from '@layui/layui-vue'
import api from '@/api';

const tipDisabled = ref(true)
const content = {
  X1: { name: 'X1', title: '有林地土壤侵蚀模数', unit: 't·hm⁻²·a⁻¹' },
  X2: { name: 'X2', title: '无林地土壤侵蚀模数', unit: 't·hm⁻²·a⁻¹' },
  N_tr: { name: 'N_tr', title: '土壤含氮量', unit: '%' },
  P_tr: { name: 'P_tr', title: '土壤含磷量', unit: '%' },
  K_tr: { name: 'K_tr', title: '土壤含钾量', unit: '%' },
  M_tr: { name: 'M_tr', title: '土壤含有机质量', unit: '%' },
  trrz: { name: 'trrz', title: '土壤容重', unit: 'g·cm⁻³' },

  N_lm: { name: 'N_lm', title: '林木氮含量', unit: '%' },
  P_lm: { name: 'P_lm', title: '林木磷含量', unit: '%' },
  K_lm: { name: 'K_lm', title: '林木钾含量', unit: '%' },
  B_nian: { name: 'B_nian', title: '林分净生产力', unit: 't·hm⁻²·a⁻¹' },
  P_s: { name: 'P_s', title: '林外降水量', unit: 'mm·a⁻¹' },
  E: { name: 'E', title: '林分年蒸散量', unit: 'mm·a⁻¹' },
  C: { name: 'C', title: '林分地表快速径流量', unit: 'mm·a⁻¹' },

  R_c: { name: 'R_c', title: '二氧化碳中碳含量', unit: '27.27%' },
  S_tr: { name: 'S_tr', title: '林分土壤固碳量', unit: 't·hm⁻²·a⁻¹' },

  Q_flz: { name: 'Q_flz', title: '林分负离子浓度', unit: '个·cm⁻³' },
  L: { name: 'L', title: '负离子寿命', unit: 'min' },
  Q_SO2: { name: 'Q_SO2', title: '吸收二氧化硫量', unit: 't·hm⁻²·a⁻¹' },
  Q_F: { name: 'Q_F', title: '吸收氟化物量', unit: 'kg·hm⁻²·a⁻¹' },
  Q_NO: { name: 'Q_NO', title: '吸收氮氧化物量', unit: 'kg·hm⁻²·a⁻¹' },
  Q_TSP: { name: 'Q_TSP', title: '年滞纳TSP量', unit: 'kg·hm⁻²·a⁻¹' },
  Q_PM10: { name: 'Q_PM10', title: '叶滞纳PM10量', unit: 'g·m⁻²' },
  Q_PM25: { name: 'Q_PM25', title: '无林地PM2.5含量', unit: 'g·m⁻²' },
  n: { name: 'n', title: '年洗脱次数', unit: '次·a⁻¹' },
  LAI: { name: 'LAI', title: '叶面积指数', unit: '' },

  A_ffgs: { name: 'A_ffgs', title: '防风固沙面积', unit: 'hm²' },
  Y1: { name: 'Y1', title: '有林地风蚀模数', unit: 't·hm⁻²·a⁻¹' },
  Y2: { name: 'Y2', title: '无林地风蚀模数', unit: 't·hm⁻²·a⁻¹' },

}

const emits = defineEmits(['update:modelValue', 'initDataList'])
const props = defineProps(
  {
    id: { type: Number, default: -1, required: true },
    resource_id: { type: Number, default: null, required: true },
    dialogTitle: { type: String, default: '', required: true },
    dialogVisible: { type: Boolean, default: false, required: true }
  }
)
// const form = ref({
//   id: -1, resource: null, X1: null, X2: null,
//   N_tr: null, P_tr: null, K_tr: null, M_tr: null, trrz: null,
//   N_lm: null, P_lm: null, K_lm: null,
//   B_nian: null, P_s: null, E: null, C: null, R_c: null, S_tr: null,
//   Q_flz: null, L: null, Q_SO2: null, Q_F: null, Q_NO: null, Q_TSP: null, Q_PM10: null, Q_PM25: null,
//   n: null, LAI: null, A_ffgs: null, Y1: null, Y2: null,
//   remark: ''
// })
const form = ref({
  id: -1, resource: props.resource_id, X1: 0, X2: 0,
  N_tr: 0, P_tr: 0, K_tr: 0, M_tr: 0, trrz: 0,
  N_lm: 0, P_lm: 0, K_lm: 0,
  B_nian: 0, P_s: 0, E: 0, C: 0, R_c: 0, S_tr: 0,
  Q_flz: 0, L: 10, Q_SO2: 0, Q_F: 0, Q_NO: 0, Q_TSP: 0, Q_PM10: 0, Q_PM25: 0,
  n: 0, LAI: 0, A_ffgs: 0, Y1: 0, Y2: 0,
  remark: ''
})

// keep a copy of initial values for reset (deep clone)
const _initialForm = JSON.parse(JSON.stringify(form.value))
const formRef = ref(null)
const rules = ref({
  name: [
    { required: true, message: '请输入名称！' },
    { type: 'string', message: '名称须为字符串!', trigger: 'blur' }
  ],
  value: [
    { required: true, message: '请输入数值！' },
    // { type: 'number', message: '必须为数字', trigger: 'blur' },
  ]
})

const dialogVisible = ref(false);

const changedialogVisible = () => {
  dialogVisible.value = !dialogVisible.value;
}
const handleClose = () => {
  emits('update:modelValue', false)
  // treeId.value = null
}
const getParam = async (param_id) => {
  await api.get('param/getparam?id=' + param_id).then((res) => {
    console.log('@getparam res', res)
    if (res.code == 200) {
      form.value = res.data;
    } else {
      form.value = JSON.parse(JSON.stringify(_initialForm))
      form.value.resource = props.resource_id;
    }
  })
}

watch(
  () => props.dialogVisible,
  () => {
    let id = props.id;
    console.log('@dialog id=', id)
    if (id != -1) {
      getParam(id);
      // 编辑，获取数据
    } else {
      // 新增，清空数据
      form.value = JSON.parse(JSON.stringify(_initialForm))
      form.value.resource = props.resource_id;
    }

  }
)


const action = ref([
  {
    text: "确认",
    callback: () => {
      formRef.value.validate(async (valid) => {
        if (valid) {
          console.log("字段校验成功！", form.value)
          await api.post("param/save", form.value).then((res) => {
            if (res.code === 200) {
              layer.msg(res.msg, { icon: 1, time: 1000 });
              emits("initDataList")
              handleClose();
              // reset local form values (avoid relying on component API)
              form.value = JSON.parse(JSON.stringify(_initialForm))
            } else {
              layer.msg(res.msg, { icon: 2, time: 1000 });
            }
          })
        } else {
          console.log("字段校验失败！")
        }
      })
    }
  },
  {
    text: "取消",
    callback: handleClose
  }
])
</script>